<template>
	<u-number-box :disabled="disabled" bgColor="transparent" color="#222222" integer :min="min" :max="max" :step="1"
		v-model="innerValue">
		<view slot="minus" class="btn" :class="[{ minus: value === min }, {disabled : disabled}]">
			<u-icon bold color="#FFFFFF" name="minus" size="20rpx"></u-icon>
		</view>
		<text slot="input" class="input" :class="{disabled : disabled}">{{ value }}</text>
		<view slot="plus" class="btn" :class="{disabled : disabled}">
			<u-icon bold name="plus" color="#FFFFFF" size="20rpx"></u-icon>
		</view>
	</u-number-box>
</template>

<script>
	export default {
		computed: {
			innerValue: {
				get() {
					return this.value || 0;
				},
				set(val) {
					this.$emit('update:value', val);
					this.$emit('change', val);
				}
			}
		},
		props: {
			min: {
				type: [Number, String],
				default: 0
			},
			max: {
				type: [Number, String],
				default: 99
			},
			value: {
				type: [String, Number],
				default: ''
			},
			disabled: {
				type: Boolean,
				default: false
			},
		}
	};
</script>
<style lang="scss" scoped>
	.btn {
		@include center;
		width: 42rpx;
		height: 42rpx;
		border-radius: 50%;
		background-color: $u-primary;
	}

	.minus {
		opacity: 0.6;
	}

	.disabled {
		opacity: 0.6;
	}

	.input {
		@include center;
		width: 88rpx;
		height: 46rpx;
		background: #fbfdff;
		border-radius: 8rpx;
		border: 2rpx solid #e3ecff;
		margin: 0 26rpx;
	}
</style>